<script setup lang="ts">
// element封装汉化
import locale from "element-plus/es/locale/lang/zh-cn";

import filterTree from './components/filterTree.vue'
import flexWidth from './components/flexWidth.vue'
import filterTable from './components/filterTable.vue'
import echartLine1 from './components/echartLine1.vue'
import threejs from './components/threejs.vue'
import dynamicArrow from './utils/ComComponent/dynamicArrow.vue'
import AnimateBubbleChart from './utils/ComComponent/AnimateBubble/AnimateBubbleChart.vue'
import PicLabelExpansion from './utils/ComComponent/PicLabelExpansion.vue'
import CellularPic from "./utils/ComComponent/CellularPic.vue";
import waterFusion from './utils/ComComponent/waterFusion.vue'


//PicLabelExpansion
let url = 'src/assets/imgs/woman.jpg' //图片地址
let describe = 'woman'  //描述文字
let position = 'right'  //'left'和 'right'
let width = '200px'  //图片宽度
let radius = '0.5em'  //圆角大小
let fontSize = '30px' //字体大小

//CellularPic
let datalist = [
  {
    url: 'src/assets/imgs/xt1.png',
    title: 'c1-a参数配置'
  },
  {
    url: 'src/assets/imgs/xt2.png',
    title: 'xt2'
  },
  {
    url: 'src/assets/imgs/xt3.png',
    title: 'xt3'
  },
  {
    url: 'src/assets/imgs/TS.jpg',
    title: 'TS'
  },
  {
    url: 'src/assets/imgs/dog.jpg',
    title: 'dog'
  },
  {
    url: 'src/assets/imgs/deer.jpg',
    title: 'deer'
  },
  {
    url: 'src/assets/imgs/house.png',
    title: 'house'
  },
  {
    url: 'src/assets/imgs/woman.jpg',
    title: 'woman'
  },
  {
    url: 'src/assets/imgs/xt4.png',
    title: 'xt1'
  },
  {
    url: 'src/assets/imgs/xt5.png',
    title: 'xt2'
  },
  {
    url: 'src/assets/imgs/xt6.png',
    title: 'xt3'
  },
  {
    url: 'src/assets/imgs/xt7.png',
    title: 'TS'
  },
  {
    url: 'src/assets/imgs/ys1.jpg',
    title: 'dog'
  },
  {
    url: 'src/assets/imgs/ys2.jpg',
    title: 'deer'
  },
]


//waterFusion
let w_width = '300px'
let w_height = '400px'
let w_centerR = '50px'
let w_aroundR = '25px'
let w_centerFontSize = '15px'

</script>

<template>
  <el-config-provider :locale="locale">
    <main class="main">
      <!-- <flexWidth /> -->
      <!-- <filterTable /> -->
      <!-- <filterTree /> -->
      <!-- <echartLine1 /> -->
      <!-- <threejs /> -->

      <!-- <dynamicArrow
        :_width="'3em'"
        :_height="'atuo'"
      /> -->

      <!-- <AnimateBubbleChart/> -->
      <!-- <PicLabelExpansion
        :_src="url"
        :_des="describe"
        :_pos="position"
        :_width="width"
        :_radius="radius"
        :_fontSize="fontSize"
      /> -->

      <!-- <CellularPic :_data="datalist" /> -->

      <!-- <switchPic /> -->

      <waterFusion
        :_width="w_width"
        :_height="w_height"
        :_centerR="w_centerR"
        :_aroundR="w_aroundR"
        :_centerFontSize="w_centerFontSize"
      />
    </main>
  </el-config-provider>
</template>

<style scoped>
.main {}

/* table的过滤弹框样式，需要放到顶层 */
::deep(.el-table-filter__bottom) {
  padding: 5px;
  float: right;
}
</style>
